<style>
#profile-data .ivu-table th {
    height: 50px;
}
#profile-data .ivu-table-header.header-fixed{
    position: fixed;
    top:60px;
}
</style>
<template>
    <div class="ivu-article">
        <Card :shadow="true" class="margin-bottom-10">
            <h4><a @click="eventBack"><Icon type="arrow-return-left"></Icon> 返回列表</a></h4>
            <h2>{{ baseMethod }} {{ requestFullUrl }}</h2>
            <h4>请求执行时间: {{baseRequestTime}}</h4>
            <h4>应用信息: {{baseRequestApp}}</h4>
            <h4>Request-ID: {{ baseRequestId }}</h4>
        </Card>
        <Card :shadow="true" class="margin-bottom-10">
            <Row>
                <Col span="6">
                    <div style="padding-right:30px; border-right: 2px solid #ddd;">
                        <div class="margin-top-5">
                            <h3 class="stitle">基础指标</h3>
                            <Table :loading="tableLoading" :show-header="false" :columns="kvColumns" :data="statDatas"></Table>
                        </div>
                        <div class="margin-top-10">
                            <h3 class="stitle">GET</h3>
                            <modal-table :columns="kvColumns" :data="getDatas" title="GET 数据"></modal-table>
                        </div>
                        <div class="margin-top-10">
                            <h3 class="stitle">POST</h3>
                            <modal-table :columns="kvColumns" :data="postDatas" title="POST 数据"></modal-table>
                        </div>
                        <div class="margin-top-10">
                            <h3 class="stitle">COOKIE</h3>
                            <modal-table :columns="kvColumns" :data="cookieDatas" title="COOKIE 数据"></modal-table>
                        </div>
                        <div class="margin-top-10">
                            <h3 class="stitle">SERVER</h3>
                            <modal-table :columns="kvColumns" :data="serverDatas" title="SERVER 数据"></modal-table>
                        </div>
                    </div>
                </Col>
                <Col span="18">
                    <div style="padding-left:30px;">
                        <div class="margin-top-5">
                            <max-chart max-chart-id="max-wall-time-chart-id" v-if="maxWallTimeData.length" :chart-data="maxWallTimeData" :red-wall-time="redWtTime" chart-title="独占调用耗时 Top 10"></max-chart>
                        </div>
                    </div>
                </Col>
            </Row>
        </Card>
        <Card :shadow="true" class="margin-bottom-10">
            <Row>
                <Col span="24">
                    <Table :row-class-name="rowClassName" id="profile-data" :loading="tableLoading" :columns="profileColumns" :data="profileDatas"></Table>
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script>

    import jQuery from 'jquery';
    import { sprintf, vsprintf } from 'sprintf-js';
    import Util from '@/libs/util.js';
    import { GetRequestUrlDetail }  from '@/libs/api.js';
    import MaxChart from './components/detail/maxChart.vue';
    import ModalTable from './components/detail/modalTable.vue';

    export default {
        components: {
            MaxChart,
            ModalTable
        },
        data () {
            return {
                scrollTop: 0,
                tableLoading: false,
                baseRequestId: '',
                baseRequestApp: '',
                baseUrl: '',
                baseMethod: '',
                baseRequestTime: '',
                baseCostTime: '',
                baseHost: '',
                yellowWtTime: 0,
                redWtTime: 0,
                kvColumns: [
                    {
                        title: '名称',
                        key: 'name'
                    },
                    {
                        title: '值',
                        key: 'value'
                    }
                ],
                profileColumns: [
                    {
                        title: '函数/方法',
                        key: 'call',
                        width: '20%'
                    },
                    {
                        title: '调用',
                        key: 'ct',
                        sortable: true,
                        align: 'right'
                    },
                    {
                        title: '时间 (μs)',
                        key: 'wt',
                        sortable: true,
                        render: (h, params) => {
                            return sprintf("%d (%s%%)", params.row.wt, params.row.wt_rate);
                        }
                    },
                    {
                        title: 'CPU (μs)',
                        key: 'cpu',
                        sortable: true
                    },
                    {
                        title: '内存 (bytes)',
                        key: 'mu',
                        sortable: true
                    },
                    {
                        title: '内存峰值 (bytes)',
                        key: 'pmu',
                        sortable: true
                    },
                    {
                        title: 'Excl.时间 (μs)',
                        key: 'excl_wt',
                        sortable: true,
                        render: (h, params) => {
                            return sprintf("%d (%s%%)", params.row.excl_wt, params.row.excl_wt_rate);
                        }
                    },
                    {
                        title: 'Excl.CPU (μs)',
                        key: 'excl_cpu',
                        sortable: true
                    },
                    {
                        title: 'Excl.内存 (bytes)',
                        key: 'excl_mu',
                        sortable: true
                    },
                    {
                        title: 'Excl.内存峰值 (bytes)',
                        key: 'excl_pmu',
                        sortable: true
                    }
                ],
                statDatas: [],
                getDatas: [],
                postDatas: [],
                cookieDatas: [],
                serverDatas: [],
                profileDatas: [],
                maxWallTimeData: []
            }
        },
        computed: {
            requestFullUrl() {
                return this.baseHost + this.baseUrl;
            }
        },
        methods: {

            init() {
                this.getRequestDetailApi();
            },

            getRequestDetailApi() {
                this.tableLoading = true;
                let params = {
                    request_id: this.$route.query['request-id']
                };
                GetRequestUrlDetail(params).then((res) => {
                    if (res.errno) {
                        this.$Message.error("Internet Server Error:" + res.message);
                    } else {
                        this.profileDatas = res.data.profile;
                        this.baseRequestId = res.data.base.request_id;
                        this.baseRequestApp = res.data.base.app;
                        this.baseUrl = res.data.base.url;
                        this.baseMethod = res.data.base.method;
                        this.baseRequestTime = res.data.base.request_time;
                        this.baseHost = res.data.base.host;
                        this.yellowWtTime = res.data.alert_wt_time.yellow;
                        this.redWtTime = res.data.alert_wt_time.red;
                        this.getDatas = res.data.get;
                        this.postDatas = res.data.post;
                        this.cookieDatas = res.data.cookie;
                        this.serverDatas = res.data.server;
                        this.maxWallTimeData = res.data.top_walltime_profile;
                        this.statDatas = [
                            {
                                name: '请求执行时间',
                                value: res.data.base.cost_time
                            },
                            {
                                name: 'CPU时间',
                                value: res.data.base.cpu_time
                            },
                            {
                                name: '内存使用',
                                value: res.data.base.memory
                            },
                            {
                                name: '内存峰值',
                                value: res.data.base.pmemory
                            }
                        ];

                        this.tableLoading = false;
                    }
                }).catch((err) => {
                    this.tableLoading = false;
                    this.$Message.error("Network error:" + err);
                });
            },

            handleScroll() { 
                let tableHeader = jQuery("#profile-data .ivu-table-header")
                let win = jQuery(window);
                let offsetTop = tableHeader.offset().top - win.scrollTop();
                if (offsetTop <= 60 ) {
                    if (!tableHeader.hasClass('header-fixed')) {
                        tableHeader.addClass('header-fixed');
                        this.scrollTop = win.scrollTop();
                    }
                }
                
                if (this.scrollTop && win.scrollTop() < this.scrollTop && tableHeader.hasClass('header-fixed')) {
                    tableHeader.removeClass('header-fixed');
                    this.scrollTop = 0;
                }
            },

            bindScrollEvent() {
                jQuery(document).on('scroll', this.handleScroll);
            },

            removeScrollEvent() {
                jQuery(document).off('scroll', this.handleScroll);
            },

            rowClassName (row, index) {
                if (row.excl_wt >= this.redWtTime) {
                    return 'table-error-row';
                } else if (row.excl_wt >= this.yellowWtTime) {
                    return 'table-warning-row';
                }
                return '';
            },

            eventBack() {
                if (window.history.length > 1 && document.referrer) {
                    this.$router.back(-1);
                } else {
                    this.$router.push('/');
                }
            }
        },
        mounted () {
            
        },
        destroyed() {
            this.removeScrollEvent();
        },
        activated () {
            this.init();
            this.bindScrollEvent();
        }
    }
</script>